<template>
  <div class="List">
    <main>
      <div class="header">
        <van-icon name="arrow-left" @click="retur" />
        <div class="list_input">
          <span @click="city_lie">上海<van-icon name="arrow-down" /></span>
          <van-search
            v-model="value"
            placeholder="请输入搜索关键词"
            background="none"
          />
        </div>
        <span><van-icon name="award-o" @click="diutr()" /></span>
      </div>

      <loading v-show="LOADING"></loading>

     
        <div class="top_botton">
          <van-dropdown-menu>
            <van-dropdown-item v-model="value1" title="区域">
              <dl v-for="(item, i) in option1" :key="i">
                <dt>
                  <p>区域</p>
                  <p>地铁</p>
                </dt>
                <dd>
                  <p>{{ item.lable }}</p>
                </dd>
              </dl>
            </van-dropdown-item>
            <van-dropdown-item v-model="value2" title="方式">
              <!-- <van-area title="标题" :options="option2" /> -->
              <van-area title="标题" :area-list="areaList" />
            </van-dropdown-item>
            <van-dropdown-item v-model="value3" title="租金">
              <van-area title="标题" :options="option3" />
            </van-dropdown-item>
            <van-dropdown-item title="筛选"  position="right"  :style="{ height: '100%', width: '50%' }"  v-model="show">
              <van-cell @click="showPopup">赛选</van-cell>
              <van-popup
              
               
               
              />
            </van-dropdown-item>
          </van-dropdown-menu>
        </div>
     
      <div class="bute">
        <dl v-for="(item, ind) in lise" :key="ind" @click="deailq()">
          <dt>
            <img :src="`http://47.102.145.189:8009` + item.houseImg" alt="" />
          </dt>
          <dd>
            <h4>{{ item.title }}</h4>
            <p>{{ item.desc }}</p>
            <b>{{ item.price }}元/月</b>
          </dd>
        </dl>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";
import Loading from "../loading/loading.vue";
export default {
  data() {
    return {
      show: false,
      lise: [],
      value: "",
      value1: 0,
      value2: "a",
      value3: 0,
      // value4: "a",
      option1: [],
      option2: [],
      option3: [],
      // option4: [],
      areaList: {
        province_list: {
          110000: "北京市",
          120000: "天津市",
        },
        city_list: {
          110100: "北京市",
          120100: "天津市",
        },
        county_list: {
          110101: "东城区",
          110102: "西城区",
          // ....
        },
      },
    };
  },
  computed: {
    ...mapState(["LOADING"]),
  },
  name: "App",
  components: {
    Loading,
  },
  created() {
    axios
      .get(
        "http://47.102.145.189:8009/houses?cityId=AREA%7C88cff55c-aaa4-e2e0&area=AREA%7C88cff55c-aaa4-e2e0&rentType=true&price=null&more=CHAR%7C76eb0532-8099-d1f4%2CFLOOR%7C1%2CAREA%7C88cff55c-aaa4-e2e0%2CORIEN%7C61e99445-e95e-7f37%2Ctrue&roomType=ROOM%7Cd1a00384-5801-d5cd&oriented=ORIEN%7C61e99445-e95e-7f37&characteristic=CHAR%7C76eb0532-8099-d1f4&floor=FLOOR%7C1&start=1&end=20"
      )
      .then((res) => {
        this.lise = res.data.body.list;
        // console.log("res...", res.data.body.list);
      });
    axios
      .get(
        "http://47.102.145.189:8009/houses/condition?id=AREA%7C88cff55c-aaa4-e2e0"
      )
      .then((res) => {
        this.option1 = res.data.body.area;
        console.log("rest..", res.data.body.area);
      });
  },
  methods: {
    retur() {
      this.$router.push("/About");
    },
    city_lie() {
      this.$router.push("/Citylist");
    },

    deailq() {
      this.$router.push("/Deail");
    },
    diutr() {
      this.$router.push("/Ditu");
    },
    showPopup() {
      this.show = true;
    },
  },
};
</script>

<style scoped lang="scss">
.List {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  width: 100%;
  height: 50px;
  // background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  align-items: center;
  font-size: 15px;
  span {
    i {
      color: #67c23a;
    }
  }
}
.van-sticky {
  border-bottom: 1px solid #ccc;
}
.top_botton {
  width: 100%;
  height: 50px;
  background: #fff;
}
.list_input {
  width: 80%;
  height: 30px;
  background: #fff;
  display: flex;
  // padding: 0 20px;
  align-items: center;
  .van-cell {
    height: 30px;
    background: #fff;
    i {
      background: #fff;
    }
  }
  span {
    width: 60px;
    height: 100%;
    display: flex;
    align-items: center;
  }
}
main {
  flex: 1;
  overflow: scroll;
}
.xidin {
  width: 100%;
  height: 50px;
  background: #fff;
  display: flex;
  align-items: center;
}
.van-popup {
  width: 100%;
  height: 40%;
  position: absolute;
  left: 0;
  top: 100px;
  transform: translate(0%, 0%);
}
.bute {
  flex: 1;
  display: flex;
  flex-direction: column;

  dl {
    width: 100%;
    display: flex;
    padding: 10px 20px;
    border: 1px solid #ccc;
    background: #fff;
    img {
      width: 106px;
      height: 80px;
    }
    b {
      color: red;
    }
    p {
      padding: 10px 0;
    }
    dd {
      padding: 10px 20px;
    }
  }
}
.loading {
  z-index: 9999px;
}
.van-popup {
  width: 100%;
  height: 500px;
}
.van-dropdown-menu__bar{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.van-dropdown-item{
  right:50%;
}
</style>
